<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>报表管理--前台用户</title>
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-icon-error {
            color: red;
            cursor: pointer;
        }

        .ql-editor {
            height: 300px;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header>
        <span class="title">{{titleText}}</span>
    </header>
    <div class="table-wraper">
        <div class="search-wraper">
            <div class="search-header">
                <span class="title">筛选查询</span>
                <el-button size="small" @click="search">查询结果</el-button>
                <el-button v-if="hasPermission('platform:user:add')" size="small" @click="addUser">添加用户</el-button>
            </div>
            <div class="search-form">
                <el-form inline label-width="100px" size="small">
                    <el-form-item>
                        <el-select v-model="q.sex" clearable placeholder="性别" style="width: 100%;"
                                   @change="changeType2">
                            <el-option label="女" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="q.bankId" clearable placeholder="请选择省行" @change="changeType">
                            <el-option v-for="bank in bankList"
                                       :key="bank.bankId"
                                       :label="bank.bankName"
                                       :value="bank.bankId.toString()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="q.searchWord" type="text" placeholder="考生账号" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="q.username" type="text" placeholder="姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="entityList" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="userId" label="序号" width="60"></el-table-column>
            <el-table-column prop="mobile" label="账号"></el-table-column>
            <el-table-column prop="username" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别" width="80">
                <template slot-scope="scope">
                    <p>{{scope.row.sex == 1 ? '男' : '女'}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="provinceBankName" label="省行"></el-table-column>
            <el-table-column prop="cityBankName" label="市行"></el-table-column>
            <el-table-column prop="subBank" label="支行"></el-table-column>
            <el-table-column prop="location" label="网点"></el-table-column>
            <el-table-column prop="idCard" label="身份证号"></el-table-column>
            <el-table-column prop="createTime" label="注册时间"></el-table-column>
            <el-table-column label="是否授权" v-if="hasPermission('platform:user:power')">
                <template slot-scope="scope">
                    <el-switch
                            style="display: block"
                            v-model="scope.row.power"
                            :active-value= "1"
                            :inactive-value= "0"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="updateEdit(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" v-if="hasPermission('platform:user:power')">
                <template slot-scope="scope">
                    <span @click="onEdit(scope)">编辑</span>
                    <span @click="onDelete(scope)">删除</span>
                </template>
            </el-table-column>


        </el-table>
        <!-- 分页 -->
        <el-button type="success" size="mini" icon="el-icon-download" style="margin-top: 10px"
                   @click="downloadExcel">批量导出
        </el-button>
        <el-button type="success" size="mini" icon="el-icon-download"
                   @click="downLoadExcelAll">全部导出
        </el-button>
        <div class="table-footer" style="text-align: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                //列表url
                listUrl: 'tbUser/getUserList',
                //导出url
                excelExportUrl: 'tbUser/downloadExcel',
                excelExportUrlAll: 'tbUser/downloadExcelAll',
                q: {
                    searchWord: '',
                    sex: "",
                    username: "",
                    bankId: ""
                },
                entityList: [],
                bankList: [],
                currentPage: 1,
                pageSize: 10,
                total: 1000,
                changeArr: [],
            }
        },
        computed: {
            titleText: function () {
                return '前台用户报表'
            }
        },
        created() {
            this.getBankList();
            this.getEntityList();
        },
        methods: {
            updateEdit(row){
                // console.log(row.userId)
                $.get(baseURL + "tbUser/changePower?id="+row.userId, function (r) {});
            },
            addUser(){
                window.location.href="/jeefast/modules/platform/userAdd.html"
            },
            onEdit(scope){
                // console.log(scope.row.userId)
                window.location.href="/jeefast/modules/platform/userEdit.html?userId="+scope.row.userId
            },
            onDelete(scope){
                // console.log(scope.row.userId)
                // deleteUser({ids:scope.row.userId}).then(res=>{
                //     alert("删除成功");
                //     created();
                // })
                $.get(baseURL + "tbUser/delete?ids="+scope.row.userId, function (r) {
                        // alert("删除成功");
                    window.location.href="/jeefast/modules/platform/12-user.html"
                });
            },
            downloadExcel() {
                var ids = [];
                $.each(vm.changeArr, function (k, v) {
                    ids.push(v.userId);
                })
                if (ids.length == 0) {
                    vm.vAlert('请选择导出的用户', '错误')
                    return false;
                }
                var url = baseURL + vm.excelExportUrl + '?token=' + token + "&userIdList=" + ids;
                window.top.location.href = url;
            },
            downLoadExcelAll(){
                var url = baseURL + vm.excelExportUrlAll + '?token=' + token ;
                window.top.location.href = url;
            },
            changeType(val) {
                if (val) {
                    this.q.bankId = val
                }
                this.getEntityList()
            },
            changeType2(val) {
                if (val) {
                    this.q.sex = val
                }
                this.getEntityList()
            },
            search() {
                vm.currentPage = 1
                vm.getEntityList()
            },
            //获取省行
            getBankList() {
                this.bankList = []
                $.get(baseURL + "irClassVideo/getBankList", function (r) {
                    if (r.msg == 'token失效，请重新登录') {
                        alert('token失效，2秒后跳转到登录页面！');
                        var timeout = setTimeout(function () {
                            window.parent.location.href = baseURL + "login.html";
                            clearTimeout(timeout);
                        }, 2000)
                    } else if (r.bankList != null) {
                        vm.bankList = r.bankList
                    }
                });
            }
        }
    })
</script>
</html>
